<template>
  <div class="dl-row-sb class-box mar-bottom bodyClass">
    <div class="left" v-loading="loading">
      <div class="">
        <template>			
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="最新" name="first">
				<div v-if="data.length>0">
					<div v-for="(item,index) in data" :key="index" class="answer-box">
					  <div class="flex">
						<img :src="item.avatar" style="border-radius:50%;" v-if="item.avatar" >
						<img :src="userImg" style="border-radius:50%;" v-if="!item.avatar">
						<div class="ml-3 flex-1">
						  <h1>{{item.answerContent}}</h1>
								<div>
									<div class="teacher" v-for="(answer,index1) in item.children" :key="index1">
										<span><span style="color: #0068B6;font-weight: 600;">专家回复/{{answer.userName}}</span>：{{answer.answerContent}}</span>
										<!-- <span>{{answer.updateTime}}</span> -->
									</div>
								</div>
						  <div class="dl-row-sb center">
							<div class="dl-row center" style="margin-top: 5px;">
								<el-button  v-if="courseChapteId"  @click="answerQue(item.id)" round size="mini" type="primary" plain>+&nbsp;专家回复</el-button>
								<span class="data" style="color: #0068B6;">{{item.children.length}}&nbsp;回答</span>
								<span class="data chapterClass">对应章节：{{item.chapterName}}</span>
			<!-- 					<el-button type="text" size="mini" @click="lookAll(item.id)" icon="el-icon-view">查看全部</el-button>
								<el-button type="text" size="mini" @click="close(item.id)"  icon="el-icon-arrow-up">收起</el-button> -->
							</div>
							<span class="ml-auto">{{item.updateTime}}</span>
						  </div>
						</div>
					  </div>
					</div>
					<el-pagination
							:total="total"
							:current-page="page + 1"
							style="margin-top: 8px;"
							layout="total, prev, pager, next, sizes"
							@size-change="sizeChange"
							@current-change="pageChange"/>
				</div>
				<div v-if="data.length==0 &&!loading">
				   <el-empty :image-size="250" :image="require('../../../assets/no_data_images/no_chapter.png')" class="empty" description="无数据"></el-empty>
				</div>
            </el-tab-pane>									
			<el-tab-pane   name="second">
				<span slot="label">
				  待回复
				  <el-badge :value='noAnswerNum' :max="99"></el-badge>
				</span>
				<no-answer ref="noAnswerview"  @noAnswerNumData="handleChange"></no-answer>
			</el-tab-pane>
            
          </el-tabs>
        </template>
        <!-- <div class="search-box">
          <el-input
              placeholder="请输入问题关键词"
              prefix-icon="el-icon-search"
              v-model="inputSearch">
          </el-input>
        </div> -->
      </div>
    </div>
    <div class="right">
      <div class="score-box dl-column center">
        <h2>课程综合评分</h2>
        <div style="font-weight: 600;">{{courseScore.score}}&nbsp;分</div>
        <el-rate v-model="courseScore.score" disabled :colors="colors">
        </el-rate>
        <el-button type="success" @click="gradeForm()" round>我要评价</el-button>
      </div>
      <!-- <div class="dl-column center">
        <el-button class="big-btn">我要提问</el-button>
      </div> -->
	<course-grade-form ref="gradeFrom"></course-grade-form>
	<answer-form ref="answerFroms"></answer-form>
    </div>

  </div>
</template>

<script>
	import courseGradeForm from './courseGradeForm.vue'
	import answerForm from './answerForm.vue'
	import noAnswer from './noAnswer.vue'
	import initData from '@/mixins/initData'
	
	export default {
		components: {courseGradeForm,noAnswer,answerForm},
		mixins: [initData],
		props:{
			couserObj:{
				type:Object,
				default:null,
			},
			courseScore:{
				type:Object,
				default:null,
			}
		},
	  data() {
		return {
		  loading:false,
		  courseChapteId: this.$route.query.id,
		  courseId: this.$route.query.courseId,
		  noAnswerNum:null,//工作通知数量
		  inputSearch:'',
		  rateNum: 4,
		  activeName: 'first',
		  colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
		  userImg: require('../../../assets/image/u353.png'),
		}
	  },
	  created() {
	  	this.$nextTick(() => {
			this.init()
	  	})
	  },
	  methods: {
		beforeInit() {
		    this.url = 'web/answer/page-list-pc'
		    this.params = {
		      page: this.page,
		      size: this.size,
			  answerContent: this.inputSearch,
		      courseId: this.courseId
		    }
		    return true
		},
		handleChange(value) {
			this.noAnswerNum=value
			//未答复数量变化，刷新已答复的
			this.init()
		},
		handleClick(tab, event) {
		  console.log(tab, event);
		},
		gradeForm(){
			this.$refs.gradeFrom.dialog = true
			this.$refs.gradeFrom.form.courseId = this.couserObj.id
		},
		answerQue(answerId){
			this.$refs.answerFroms.dialog = true
			this.$refs.answerFroms.form.pid = answerId
			this.$refs.answerFroms.form.courseId = this.couserObj.id
			this.$refs.answerFroms.form.courseName = this.couserObj.courseName
			this.$refs.answerFroms.form.chapterId = this.$route.query.id
			this.$refs.answerFroms.form.type = 2
		}
	  }
	}
</script>

<style lang="scss" scoped>
	.bodyClass{
		min-height: calc(100vh - 594px);
	}
	.left{
	  position: relative;
	}
	.search-box{
	  position: absolute;
	  right: 0;
	  top: -10px;
	}
	.chapterClass{
		text-overflow: ellipsis;
		overflow: hidden;
		width: 380px;
		white-space: nowrap;
	}
</style>